
<template>
  <view class="root">
    <view
      class="fixed width-100vw jc-center bgc-f7f4fc"
      :style="{ height: `54px` }"
    >
      <view
        class="fd-row ai-center f1 bgc-fff br-36"
        :style="{
          padding: `0 24rpx`,
          margin: `30rpx`,
          boxShadow: `0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22)`,
        }"
      >
        <image class="width-30 height-30" src="/static/imgs/icon-search0.png" />
        <input
          class="f1 fs-28"
          :style="{
            padding: `12rpx`,
          }"
          placeholder="输入关键字查找社群"
          v-model="searchContent"
          @input="getData('search')"
          placeholder-class="color-8f9aa8 fs-24"
        />
      </view>
    </view>
    <view class="bgc-f7f4fc" :style="{ height: `54px` }" />
    <view
      v-for="(item, index) in community.lists"
      :key="index"
      @click="goto(index)"
      hover-class="btn-hover"
      class="section fd-row bgc-fff"
    >
      <image class="img-community" :src="item.avatar" mode="aspectFill" />
      <view class="subject f1 ml-20">
        <text class="title fs-28 color-333">
          {{ item.name }}
        </text>
        <view class="fd-row mt-16 fw-500">
          <view class="mr-10 fs-22 fd-row ai-baseline">
            <text class="color-8f9aa8">关注</text>
            <text class="color-333 ml-6 mr-6">{{ item.rssNum }}</text>
            <text class="color-8f9aa8">人</text>
          </view>
          <view class="ml-10 fs-24 fd-row ai-baseline">
            <text class="color-8f9aa8">浏览</text>
            <text class="color-333 ml-6 mr-6">{{ item.scanNum }}</text>
            <text class="color-8f9aa8">次</text>
          </view>
        </view>
      </view>
      <view class="jc-sb ai-center">
        <text
          class="color-ddd"
          v-if="Number(userInfo.level) > 0 && Number(item.level) === 0"
        >
          *
        </text>
        <text v-else />
        <view v-if="item.isRss" class="fd-row ai-center">
          <image class="width-24 height-18" src="/static/imgs/icon-hook.png" />
          <text class="fs-26 color-333 ml-6">已关注</text>
        </view>
        <view
          v-else
          @click.stop="subscription(index)"
          class="subscription color-fff fs-26 bgc-eb"
        >
          + 关注
        </view>
      </view>
      <text v-if="item.msgNum" class="mark">
        {{ item.msgNum > 99 ? "99+" : item.msgNum }}
      </text>
    </view>
    <label v-if="tips.isShow" class="ai-center jc-center mt-30">
      <image
        v-if="tips.showIcon"
        class="width-46 height-46"
        src="/static/imgs/icon-loading.gif"
        mode="aspectFill"
      />
      <text class="color-666 fs-28 ml-18">{{ tips.text }}</text>
    </label>
    <text
      v-if="!community.lists.length && !tips.isShow"
      class="color-666 fs-28 ml-18 text-center mt-30"
    >
      暂无数据
    </text>

    <navigator
      :url="`/pages/editGroup?community_id=${bid}`"
      hover-class="btn-hover"
      class="posting fixed bottom-92 right-0"
    >
      <image class="btn-create" src="/static/imgs/btn-create.png" />
    </navigator>
  </view>
</template>

<script>
  export default {
    data: () => ({
      searchContent: "",
      userInfo: uni.getStorageSync("userInfo") || { level: -1 },
      community: { lists: [], page: 1 },
      tips: {
        isShow: true,
        showIcon: true,
        text: "加载中...",
      },
      bid: 0,
    }),
    onLoad({ bid }) {
      this.bid = bid;
      this.getData();
    },
    onPullDownRefresh() {
      this.getData("refresh");
    },
    onShareAppMessage() {
      return {
        title: "邻居社群",
        path: `/pages/communityGroup?bid=${this.bid}`,
      };
    },
    onShareTimeline() {
      return {
        title: "邻居社群",
        path: `/pages/communityGroup?bid=${this.bid}`,
      };
    },
    methods: {
      goto(index) {
        let item = this.community.lists[index];
        item.msgNum = 0;
        uni.navigateTo({ url: `/pages/postBar?id=${item.bid}` });
      },
      inputSearchContent({ detail: { value } }) {
        this.searchContent = value;
        this.getData("search");
      },
      getData(mode) {
        if (["search", "init", "refresh"].includes(mode)) {
          this.community.page = 1;
          this.community.lists = [];
        }
        if (!this.community.page) return;

        this.tips = {
          isShow: true,
          showIcon: true,
          text: "加载中...",
        };

        uni.fetch("/api/login/group_lists", {
          data: {
            bid: this.bid,
            keyword: this.searchContent,
            page: this.community.page,
            limit: 10,
          },
          complete: uni.stopPullDownRefresh,
          success: (res) => {
            this.community.page = res.page;
            this.tips.isShow = !res.lists.length;
            this.community.lists.push(...res.lists);
            if (!res.lists.length) {
              this.tips.showIcon = false;
              this.tips.text = "暂无更多内容";
            }
          },
        });
      },
      subscription(index) {
        uni.fetch("/api/bbs/rss", {
          data: { bid: this.community.lists[index].bid },
          success: (res) => (this.community.lists[index].isRss = true),
        });
      },
    },
  };
</script>

<style scoped>
  .root {
    padding-bottom: 50px;
  }

  .navigate-bar {
    position: fixed;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 44px;
    z-index: 9;
    top: var(--status-bar-height);
    padding: 0 10rpx;
    font-size: 16px;
  }

  .navigate-placeholder {
    height: 44px;
  }

  .icon-back,
  .icon-search {
    font-family: "iconfont";
    font-size: 20px;
    font-weight: 500;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
  }

  .icon-search::after {
    content: "\e627";
  }

  .icon-back::after {
    content: "\e611";
  }

  .icon {
    width: 114rpx;
    height: 114rpx;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 10rpx;
    margin: 12rpx 30rpx;
    padding: 15rpx;
  }

  .img-community {
    width: 130rpx;
    height: 130rpx;
  }

  .mark {
    width: 44rpx;
    height: 44rpx;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 24rpx;
    background: #fc5260;
    box-shadow: 0 3rpx 8rpx 0 rgba(252, 82, 96, 0.22);
    border-radius: 50%;
  }

  .subscription {
    padding: 6rpx 22rpx;
    background: linear-gradient(90deg, #8ec5fc, #4388e7);
    border-radius: 25rpx;
  }
  .btn-create {
    width: 100rpx;
    height: 100rpx;
    margin-right: 18rpx;
  }
</style>